Skip to main content

List header

The list header provides an overview of what the list is about and allows you to interact with it.

Examples​

Default​

Variations​

Usage​

How this component works​

When creating a list, the list header is always present for high-level information and interactions.

Behavior​

  • Center: If the user selects the Cancel or Done button, the panel will close.
  • Multi-select: If the user selects the Checkbox, all items within the list will be selected.

Choosing between variations​

  • Default: If you only need to include a text-based title
  • Center: If the list appears above the screen content like a full panel. This variation includes a title, Cancel button, and Done button.
  • Multi-select: If multiple items with in the list can be selected

Placement​

The list header always appears at the top of a list.

Instances of this component in production​

  • Prescriptions
  • Claims
  • Payments

Accessibility considerations​

  • The component should be called out as a menu item. Its state (selected/unselected) and place in the list should be called out. Example: Selected. Acetaminophen 25MG Tab. 4 refills remaining. Menu item. 1 of 5.